<template>

<div class="user-center">

		<div class="survey_show">
			<dialog :show.sync="show_survey">
				<a @click="goSurvey()">
					<img class="cover" src="../assets/images/user/survey_dm.png" />
				</a>
				<span @click="setdialog">
					<i class="iconfont">&#xe629;</i>
				</span>
			</dialog>
		</div>

		<div class="auto_buy">
			<dialog :show.sync="auto_buy_dialog">
				<div class="autobuy">
					<b>请输入手机验证码：</b>
					<div style="vertical-align:middle">
						<input type="text" v-model="returnSMS.OTPNO" style="vertical-align:middle" />
						<button style="vertical-align:middle"  @click="sentSMS" >
							{{ msn.btnTxt }}
						</button>
					</div>
					<div>
						<button @click="stopAutoBuy">提交</button>
					</div>
				</div>
				<i class="iconfont" @click="close_auto">&#xe629;</i>
			</dialog>
		</div>

		<div class="openAccount">

			<confirm :show.sync="openAccount" title="尊敬的用户"  confirm-text="前往设置" cancel-text="再看看" @on-cancel = " openAccount = false " @on-confirm="goOpenAccount">
				<p style="text-align:center;">您尚未开通银行资金存管账户,请提交资料开通。</p>
			</confirm>
		</div>




		<header>
			<i class="iconfont setting" @click="goSetUp()">&#xe62a;</i>
			<div class="top-content">
				<div class="protrait" style="background:url({{info.avatar}});background-size:cover;border-radius:50%">
					<span v-bind:class=" pinggu ? 'survey_icon done':'survey_icon'  " @click="goSurvey()"></span>
				</div>
				<div class="value">
					<b>您好 {{info.phone}}</b>
					<i>{{info.pinggu_str}}</i>
					<strong>{{info.total}}</strong>
					<em>总资产(元)</em>
				</div>
				<ul class="cbox nav">
					<li>
						<b>{{info.earnings}}</b>
						<span>昨天收益(元)</span>
					</li>
					<li>
						<b>{{info.profit}}</b>
						<span>累计总收益(元)</span>
					</li>
				</ul>
			</div>
		</header>

		<div class="btnlist">
			<a class="p_btn_nob" v-link="{ path: '/withdraw-cash'}">提现</a>
			<a class="p_btn" v-link="{ path: '/recharge_guide'}">充值</a>
		</div>

		<ul class="moneylist clearfix">
			<li>
				<strong>可用余额(元)</strong>
				<span>{{info.balance}}</span>
			</li>

			<li>
				<strong>待收总额(元)</strong>
				<span>{{info.total_collect}}</span>
			</li>

			<li>
				<strong>待收本金(元)</strong>
				<span>{{info.total_capital}}</span>
			</li>

			<li>
				<strong>待收利息(元)</strong>
				<span>{{info.total_interest}}</span>
			</li>

			<li>
				<strong>本月待收(元)</strong>
				<span>{{info.recover_account_wait_month}}</span>
			</li>

			<li>
				<strong>本月已收(元)</strong>
				<span>{{info.recover_account_yes_month}}</span>
			</li>

			<li>
				<strong>推荐收益(元)</strong>
				<span>{{info.rec_reward}}</span>
			</li>

			<li>
				<strong>冻结资金(元)</strong>
				<span>{{info.frost}}</span>
			</li>
		</ul>

		<ul class="s-menu bottom" style="margin-bottom: 2.5rem;">
			<li class="sp">
				<a class="txt" v-link="{ path: '/user/sign-contract'}">
					<i class="iconfont ft">&#xe650;</i>
					电子签章及授权
				</a>
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li class="sp">
				<a class="txt" v-link="{ path: '/auto-buy'}">
					<i class="iconfont ft">&#xe633;</i>
					自动投标
				</a>
				<span class="disa">

					<switch title="自动投标"
					:value.sync="opened"
					@click=" setAutoWarning() "
						></switch>

				</span>
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/invest-record'}">
				<i class="iconfont ft">&#xe62c;</i>
				投资明细
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/money-record'}">
				<i class="iconfont ft">&#xe636;</i>
				交易流水
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-show="info.checkIntegral" v-link="{ path: '/shopping'}">
				<i class="iconfont ft">&#xe63b;</i>
				我的积分
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/withdraw-record'}">
				<i class="iconfont ft">&#xe63c;</i>
				提现记录
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/recharge-record'}">
				<i class="iconfont ft">&#xe63d;</i>
				充值记录
				<i class="iconfont se">&#xe600;</i>
			</li>

			<!-- <li v-link="{ path: '/redpack'}">
				<i class="iconfont ft">&#xe63a;</i>
				我的红包
				<i class="iconfont se">&#xe600;</i>
			</li> -->

			<li v-link="{ path: '/friends-report'}">
				<i class="iconfont ft">&#xe63a;</i>
				我的推荐奖励
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/promotion/170711'}">
				<i class="iconfont ft">&#xe63b;</i>
				推荐有礼
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/message'}">
				<i class="iconfont ft">&#xe630;</i>
				站内信息
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/user/profile'}">
				<i class="iconfont ft">&#xe644;</i>
				个人设置
				<i class="iconfont se">&#xe600;</i>
			</li>


			<li v-link="{ path: '/user/reg-borrower'}">
				<i class="iconfont ft">&#xe63b;</i>
				注册成为借款人
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/user/reg-warrantor'}">
				<i class="iconfont ft">&#xe63b;</i>
				注册成为担保人
				<i class="iconfont se">&#xe600;</i>
			</li>

			<li v-link="{ path: '/loan'}">
				<i class="iconfont ft" style="color:#3cc278;">&#xe607;</i>
				我要借款
				<i class="iconfont se">&#xe600;</i>
			</li>


		</ul>

	<form-page :url.sync="post_url" :rdata.sync="post_data"></form-page>
	<contract
	v-ref:cont
	:show_loading.sync="show_loading"
	></contract>
	<!-- <auto-terms :show.sync="showAutoTerms"></auto-terms> -->
	<!-- <common-dialog v-show="showAutoTerms"  @update:setparent=" setparent "  :close="true">
		<auto-terms></auto-terms>
	</common-dialog> -->

	<confirm :show.sync="showAutoTerms" title="温馨提醒"  confirm-text="确认" cancel-text="再看看" @on-cancel = " showAutoTerms = false " @on-confirm="setAuto">
		<auto-terms></auto-terms>
	</confirm>

</div>
</template>


<style>
@import '~vux/dist/vux.css';
</style>


<script>
var time_work = null, vm = this;
import {Api_Set_Auto, c_user,Api_Send_Auto_SMS, Api_Send_Set_Auto_Buy} from '../config/api'
import {Dialog, Switch, Group, Alert, Confirm} from 'vux'
import FormPage from '../components/common/form'
import api from '../data/api';
import Contract from '../components/common/contract'
import AutoTerms from '../components/auto_terms'
//import CommonDialog from "../components/dialog";  //弹窗插件

import { mapGetters } from 'vuex'
import '../assets/sass/user/auto-buy.scss'

export default {

	data () {
		return {
			showAutoTerms:false,
			openAccount:false,
			post_url: '',
			post_data:{},
			show_survey:false,
			busy:false,
			info:{},
			auto_buy_dialog:false,
			pinggu:true,
			opened:false,
			schecked:'',
			subForm:null,

			msn:{
				stop:false,
				disableBtn:false,
				btnTxt:"重新发送",
				timer:0
			},

			returnSMS:{
				OTPSEQNO: '',
				OTPNO: '',
				status: false
			}
		}
	},

    computed: {
		...mapGetters([
            'showDialog',
            'showLoading'
        ])
    },

	components: {
		AutoTerms,
		Confirm,
		Contract,
		FormPage,
		Dialog,
		Switch,
		Alert
	},
	methods: {
		getForm(){
			for(var a in this.$children){
				if(this.$children[a].name == 'form')
					this.subForm = this.$children[a];
			}
		},

		showSurvey(){
			this.show_survey = true;
		},

		setAutoWarning(){
			if(vm.info.open == 0 ){
				vm.showAutoTerms = true;
				setTimeout(() => {
					vm.opened = false;
				}, 100);
			}else{
				vm.setAuto();
			}
		},

		setAuto(){

			var that = this;


			if(vm.info.open == 0 ){

				//console.log('false')
				//return;
				this.$store.dispatch('setShowLoading', true);
				this.busy = true;
				var data = {};
				this.$http.post(Api_Set_Auto, data,'').then(function (response) {
					var rs = response.data;
					this.$store.dispatch('setShowLoading', false);

					if(!rs.status){
						alert(rs.msg)
						this.busy = false;
					}else {
						/*this.$children[1].show = true
						this.post_url = rs.action_url
						this.post_data.RequestData = rs.RequestData
						this.post_data.transCode = rs.transCode
						this.$children[1].submit();*/
									this.getForm();
									this.subForm.show = true
									this.post_url = rs.action_url
									this.post_data.RequestData = rs.RequestData
									this.post_data.transCode = rs.transCode
									this.subForm.submit();
					}
				}, function (response) {

				});

			}else{

				//console.log('yes')
				//return;

				this.msn.disableBtn = true, this.startTimer(), this.auto_buy_dialog = true;

				if(this.msn.timer > 0 && this.msn.timer < 60 ) return;

				this.sendAutoConfirmSMS();

			}

		},

		sendAutoConfirmSMS(){
			var data = {};
			if(this.busy){
				return;
			}
			this.busy = true;
			//this.$store.dispatch('setShowLoading', true);
			this.$http.post(Api_Send_Auto_SMS, data,'').then(function (response) {
				var obj = response.data;
				//this.$store.dispatch('setShowLoading', false);
				this.busy = false;
				if(!obj.status){
					alert(obj.msg);
					this.stopTimeCount();
				}else{
					this.returnSMS.OTPSEQNO = obj.OTPSEQNO;
					this.returnSMS.status = obj.status;
				}
			});
		},

		//关闭自动投标
		stopAutoBuy(){
			//if(this.returnSMS.status == false || this.busy){
			if(this.returnSMS.status == false || this.busy == true || this.returnSMS.OTPNO =='' ){
				return;
			}else{
				this.busy = true, this.$store.dispatch('setShowLoading', true);
				var data = {
					OTPSEQNO: this.returnSMS.OTPSEQNO,
					OTPNO: this.returnSMS.OTPNO
				};
				this.$http.post(Api_Send_Set_Auto_Buy, data,'').then(function (response) {
					var obj = response.data;
					this.$store.dispatch('setShowLoading', false);
					alert(obj.msg);
					this.busy = false;
					//this.stopTimeCount();

					if(obj.status){
						this.auto_buy_dialog = false
						this.opened  = false;
					}

				});

			}

		},

	    updateSms () {

	    	console.log('get ')
	        if(this.msn.timer <= 0)
	        {
				this.stopTimeCount();
	        }
	        else{
	            this.msn.timer--;
	            this.msn.btnTxt = '剩余'+this.msn.timer+'秒';
	        }

	    },

		stopTimeCount(){
			clearInterval(time_work);
			this.msn.timer  = 0;
			this.msn.stop = false;
			this.msn.disableBtn = false;
			this.msn.btnTxt = "重新发送";
		},
	    startTimer () {
			clearInterval(time_work);
			//if(this.msn.timer>0) return;
			if(this.msn.timer == 0)	this.msn.timer = 60;
	        if(this.msn.stop == false)
	        {
				time_work = setInterval(this.updateSms,1000);
	        }
	        else
	        {
				clearInterval(time_work);
	        }

	        //this.msn.stop = !this.msn.stop;
	    },
		sentSMS(){
			if(this.msn.disableBtn){
				return;
			}
			console.log('sentSMS');
			this.msn.disableBtn = true, this.startTimer();
			this.sendAutoConfirmSMS();
		},
/*  	switchAuto(key){
			//console.log(this.opened)
			if(this.opened == false)
				window.location.href = Api_Set_Auto;
			else{
				this.auto_buy_dialog = true;
			}
		},*/
		goSurvey(){
			this.$route.router.go('/survey')
		},

		goOpenAccount(){
			this.$route.router.go('/openAccount');
		},

		close_auto(){
			this.auto_buy_dialog = !this.auto_buy_dialog;
		},

		setdialog(){
			this.show_survey = !this.show_survey;
		},

		async fetch() {
			vm = this;
			vm.$store.dispatch('setShowLoading', true);

			/* this.$http({url: c_user, method: 'GET', timeout:10000}).then(function (response) {


				var obj = response.data;
				this.$store.dispatch('setShowLoading', false);
				if(obj.code == '10055'){
					sessionStorage.removeItem("login");
					that.$route.router.go('/login?from=user');
					return;
				}

				that.info = obj.data
				if( obj.status == true )
					that.invit_status = that.info.invit_status

				if(that.info.pinggu==1){
					that.show_survey = true;
					that.pinggu = false;
				}

				if(that.info.open == 1){
					this.opened = true;
				}
				else{
					this.opened = false;
				}


				}, function (res) {

					if(res.status==408 || res.ok==false){
						this.fetch();
					}else{
						console.log(res)
					}
			}); */



			var res = await api.user.info();
			//res = {"0":{"money":null},"msg":"\u6570\u636e\u6b63\u5e38\u8fd4\u56de","code":"10020","status":true,"data":{"total_capital":"0.00","total_interest":"0.00","total_collect":"0.00","recover_interest":"0.00","frost":"50,100.00","balance":"0.00","username":"13801037065","bank_money":"0.00","total":"50,100.00","phone":"13801037065","bank_AcNo":"8970660100001561856","bank_AcName":"\u6c88\u9759","bank_Branch":"\u5e7f\u4e1c\u534e\u5174\u94f6\u884c\u80a1\u4efd\u6709\u9650\u516c\u53f8\u6c55\u5934\u5206\u884c","invit_status":"0","is_vip":0,"message_new":1,"earnings":"0.00","profit":"0.00","recover_account_wait_month":"0.00","recover_account_yes_month":"0.00","avatar":"https:\/\/www.uximoney.com\/themes\/blue\/img\/protrait.png","pinggu":5,"pinggu_str":"\u6210\u957f\u578b\u6295\u8d44\u4eba\u58eb(\u5efa\u8bae\u9009\u62e91-36\u4e2a\u6708\u6709\u8f66\u8f86\u3001\u623f\u4ea7\u62b5\u62bc\u7406\u8d22\u9879\u76ee)","open":0,"checkIntegral":false,"rec_reward":"0.00"}};
			vm.info = res.data;
			vm.$store.dispatch('setShowLoading', false);

			if(res.code == '10055'){
				sessionStorage.removeItem("login");
				vm.$route.router.go('/login?from=user');
				return;
			}

			if( res.status == true )
				vm.invit_status = vm.info.invit_status


			//自动投标状态设置
			if(vm.info.open == 1)
				vm.opened = true;
			else
				vm.opened = false;


			//判断是否开通存管账户
			if(vm.info.bank_AcNo == undefined || vm.info.bank_AcNo == '' || vm.info.bank_AcNo == null){
				vm.openAccount = true;
				return;
			}else{
				vm.openAccount = false;  //已开通
			}


			//设置风险评估
			if(vm.info.pinggu==1){
				vm.show_survey = true;
				vm.pinggu = false;
			}

			//读取法大大 签章 和 授权
			await this.$refs.cont.getContract()

			if(vm.showDialog && vm.show_survey)
				vm.show_survey = false;
		},

		setMenu: function (next) {
			this.showMenu = !this.showMenu
		},

		goSetUp: function (next) {
			this.$route.router.go('/user-setup?tel='+this.info.phone+'&name='+this.info.bank_AcName+'&acno='+this.info.bank_AcNo+'&avatar='+this.info.avatar)
			//this.$route.router.go('/user-setup');
		}/* ,


        onShowTerms(){
			//vm.firmData.show = false;

			console.log('why3');
            vm.alertData.show = true;
            vm.alertData.title = '关于电子签章详情';
            vm.alertData.buttontxt = '确认';
            vm.alertData.content = '<p>目前“有喜财富”已与国内领先的第三方电子合同平台法大大达成合作，引入法大大电子合同，可以全面实现在线合同的数字签名及合同托管，进一步达到了监管机构对P2P平台合规的要求，实现了借贷双方的穿透，第三方电子合同能极大地解决目前网贷交易过程中借贷双方时间、空间不一致无法一起签订传统纸质合同问题。因此需要您在通过法大大平台申请个人数字签章，并进行授权使用。</p>';

        },

        async getContract(){

			vm.$store.dispatch('setShowLoading', true);
			var res = await api.user.get_contract_status();
			vm.$store.dispatch('setContractStatus', res);
			vm.$store.dispatch('setShowLoading', false);

			//申请申请窗口
			if(vm.contractStatus.open_status){
				console.log('why1');
				vm.firmData.content = 'sign';
				vm.firmData.confirmText = '去签章'
				vm.firmData.show = true;
				return; //如果还没有签章,不显示授权。
			}
			//自动签章授权窗口
			if(vm.contractStatus.auto_status){
				console.log('why2');
				vm.firmData.content = 'permit';
				vm.firmData.confirmText = '去授权'
				vm.firmData.show = true;
			}

		},


		//申请签章及授权
        async setContract(){
			var res = null;
			vm.$store.dispatch('setShowLoading', true);
			console.log(vm.firmData.content);
			return;

			if( vm.firmData.content ==  'sign'){

				//申请签章
				res = await api.user.investor_sign_contract();
				vm.$store.dispatch('setShowLoading', false);
				vm.alertData = {show:true, title:'信息提示', buttontxt:'确定', content:res.msg};
				if(res.status){
					setTimeout(function() {
						vm.alertData.show = false;
						vm.getContract();
					}, 2500);
				}

			}else{
				//申请授权
			}

        } */
	},

	route: {
		activate ( transition ) {
			//console.log(sessionStorage.getItem("loan"));
			//this.header = true,
			//this.tabbar = true;
			vm = this;
			document.title = "用户中心 - 有喜财富手机版";
			this.fetch();
			transition.next();


		}
	}
}
</script>


<style lang="scss" scoped>
.openAccount{
	.weui_dialog{
		background:#fff;
	}
}
</style>
